<template>
	<view class="main">
		<text class="title">{{ title }}</text>
		<view class="step-title">
			<view></view>
			<text>流程明细</text>
		</view>
		<view class="step-line">
			<u-time-line>
				<u-time-line-item v-for="(item, index) in viewData" :key="index">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<view class="node"><view class="node-small"></view></view>
					</template>
					<template v-slot:content>
						<view>
							<view class="timeAndBtn">
								<view>
									<text>{{ item.time.slice(0, 10) }}</text>
									<view>
										<text>{{ item.time.slice(11, 16) }}</text>
									</view>
								</view>
								<button v-if="index == 0">提交</button>
								<button v-if="index != 0">审批</button>
							</view>
							<view class="view-info" v-if="index == 0 ? '提交环节' : '审批环节'">提交环节：{{ item.taskName }}</view>
							<view v-if="index == 0 ? '提交结果' : '审批结果'">提交结果：{{ item.actResult }}</view>
							<view v-if="item.actResult == '审核不通过'">不通过理由：{{ item.appOpinion }}</view>
							<view v-if="item.actResult == '已公示' || item.taskName == '公示'">公示文件：{{ item.publicFile }}</view>
							<view v-if="item.actResult == '已公示' || item.taskName == '公示'">公示链接：{{ item.publicLink }}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
		<view class="result-box">
			<text>办结结果：</text>
			<text class="result">{{ result }}</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '',
			viewData: [],
			result: ''
		};
	},
	onLoad(data) {
		this.title = data.name;
		this.getViewData(data.code, data.busId);
	},
	methods: {
		getViewData(code, busId) {
			this.$ajax({
				url: '/api/wwwNews/selectMyItemDetail',
				method: 'get',
				noErrorMsg: true,
				headers: {
					accessToken: uni.getStorageSync('access_token')
				},
				data: {
					code,
					busId,
					userType: uni.getStorageSync('userType')
				}
			}).then(res => {
				if (res.code == 200) {
					this.viewData = res.data.reverse();
					this.result = this.viewData[0].status
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.main {
	padding: 68rpx 51rpx 60rpx 51rpx;
	font-size: 28rpx;
	color: #333333;
	/deep/ .u-time-axis:before {
		border: 1rpx solid #5b96ff;
	}
	.title {
		font-size: 44rpx;
		color: #333333;
		font-weight: bold;
	}
	.step-title {
		display: flex;
		align-items: center;
		font-size: 36rpx;
		color: #333333;
		margin: 60rpx 0rpx 40rpx 0rpx;
		view {
			width: 6rpx;
			height: 36rpx;
			background-color: #3c90f2;
			border-radius: 2rpx;
			margin-right: 22rpx;
		}
	}
	.step-line {
		margin-left: 40rpx;
		.node {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			border: solid 2rpx #5b96ff;
			// 使内部圆居中
			display: flex;
			align-items: center;
			justify-content: center;
			.node-small {
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				background-color: #5b96ff;
			}
		}
		.timeAndBtn {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			view {
				font-size: 28rpx;
				color: #5b96ff;
				view {
					color: #333333;
				}
			}
			button {
				width: 92rpx;
				height: 42rpx;
				padding: 0rpx;
				line-height: 42rpx;
				font-size: 24rpx;
				color: white;
				background-color: #5b96ff;
				border-radius: 5rpx;
			}
		}
		.view-info {
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}
	.result-box {
		margin-top: 60rpx;
		text-align: center;
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		.result {
			color: #5b96ff;
		}
	}
}
</style>
